<template>
    <div class="right-content">
        <div class="energy-info">
            <div class="energy-title"><span class="title-info">能耗情况</span></div>
            <div class="energy-content">
                <div ref="main" class="energy"></div>
            </div>
        </div>
      </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted,onUnmounted} from "vue"

let myChart=null;
const main = ref()

const setecharts = () => {
   myChart = echarts.init(main.value)
  const colors = ['#5470C6', '#EE6666'];
  let option = {
    color: colors,
    legend: {
      textStyle:{
          color:'#fff'
      }
    },
    grid: {
      top: 30,
      bottom: 20,
      left: '8%',
      right: '4%',
    },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: '#fff'
        }
      },
      data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
    },
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    }
  ],
  series: [
    {
      name: '电能耗用',
      type: 'line',
      //xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,]
    },
    {
      name: '水能耗用',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6]
    }
  ]
    }
    option && myChart.setOption(option);
}

onMounted(() => {
    setecharts()
})
onUnmounted(() => {
    if (myChart) {
        myChart.dispose(); // 组件卸载时销毁实例
    }
});
</script>
<style lang="less" scoped>
.right-content{
    height:290px;
    width:548px;
    background: url('../components/img/right-center.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom:20px;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
    .energy-info{
        padding:15px 20px;
        display:flex;
        flex-direction:column;
        height:100%;
        .energy-title{
          color:#fff;
          background: url('../components/img/title-bg.png') no-repeat;
          background-size: 100% 100%;
          height:36px;
          line-height:36px;
          .title-info{
              margin-left:40px;
          }
        }
        .energy-content{
            display: flex;
            height:calc(100% - 30px);
            .energy{
                height:100%;
                width:100%;
            }
        }
    }
}
</style>